<script setup>
  // 从 vue 中导入 reactive 和 readonly 函数
  import { 
    reactive,
    readonly,
    isProxy,
    isReactive,
    isReadonly,
  } from 'vue';

  // 顶层的绑定会被暴露给模板( 比如 customer 、user 、person 都属于顶层绑定 )
  let customer = { id: 1001, name: '小明', gender: '男' }
  // 将 customer 包装成 响应式 对象
  const user = reactive( customer );
  // 将 customer 包装成 只读对象
  const person = readonly( customer );

  // console.log( 'customer is reactive: ' , isReactive( customer ) );
  // console.log( 'customer is proxy: ' , isProxy( customer ) );
  // console.log( 'user is reactive: ' , isReactive( user ) );
  // console.log( 'user is proxy: ' , isProxy( user ) );
</script>

<template>
  <div class="container">
    <div class="wrapper first">
        <p class="title">非响应式</p>
        <div class="row">
            <span>
                <input type="text" v-model="customer.id">
            </span>
            <span>{{ customer.id }}</span>
        </div>
        <div class="row">
            <span>
                <input type="text" v-model="customer.name">
            </span>
            <span>{{ customer.name }}</span>
        </div>
        <p>customer is reactive: {{ isReactive( customer ) }}</p>
        <p>customer is proxy: {{ isProxy( customer ) }}</p>
        <p>customer is readonly: {{ isReadonly( customer ) }}</p>
    </div>
    <div class="wrapper second">
        <p class="title">响应式</p>
        <div class="row">
            <span>
                <input type="text" v-model="user.id">
            </span>
            <span>{{ user.id }}</span>
        </div>
        <div class="row">
            <span>
                <input type="text" v-model="user.name">
            </span>
            <span>{{ user.name }}</span>
        </div>
        <div class="row">
            <span>
                <input type="radio" v-model="user.gender" value="男">靓仔
                <input type="radio" v-model="user.gender" value="女">靓妹
            </span>
            <span>{{ user.gender }}</span>
        </div>
        <p>user is reactive: {{ isReactive( user ) }}</p>
        <p>user is proxy: {{ isProxy( user ) }}</p>
        <p>user is readonly: {{ isReadonly( user ) }}</p>
    </div>
    <div class="wrapper third">
        <p class="title">只读</p>
        <div class="row">
            <span>
                <input type="text" v-model="person.id">
            </span>
            <span>{{ person.id }}</span>
        </div>
        <div class="row">
            <span>
                <input type="text" v-model="person.name">
            </span>
            <span>{{ person.name }}</span>
        </div>
        <div class="row">
            <span>
                <input type="radio" v-model="person.gender" value="男">靓仔
                <input type="radio" v-model="person.gender" value="女">靓妹
            </span>
            <span>{{ person.gender }}</span>
        </div>
        <p>person is reactive: {{ isReactive( person ) }}</p>
        <p>person is proxy: {{ isProxy( person ) }}</p>
        <p>person is readonly: {{ isReadonly( person ) }}</p>
    </div>
  </div>
</template>

<style scoped>
.container {
    margin: 15px;
    border: 1px solid #ddd;
    box-shadow: 0 0 30px -15px blue;
}

.wrapper {
    margin: 15px;
    border: 1px solid #ddd;
}

.wrapper>p {
    margin: 0;
    text-align: center;
    line-height: 30px;
}

.wrapper>p.title {
    margin: 0;
    background: #efefef;
}

.row {
    display: flex;
    line-height: 50px;
}

.row>span {
    flex-basis: 50%;
    text-align: center;
}
</style>